import React, { Component } from 'react'
import axios from "axios";

// 引入组件 
import List from '../../components/List';
// import Class from '../../components/Class';


export class Index extends Component {
    constructor(props) {
        super(props)

        this.state = {
            list: [], //列表数据
            classify: [], //分类数据
            active: 0
        }
    }

    componentDidMount() {
        // 列表数据 
        axios.get("/list").then(res => {
            this.setState({
                list: res.data
            })
        })

        // 分类数据 
        axios.get("/api/classify").then(res => {
            this.setState({
                classify: res.data,
            })
        })
    }
    render() {
        const { list, classify, active } = this.state;
        return (
            <div>
                <header></header>
                <ul className='tab'>
                    {
                        // classify.lemgth ?
                        classify.map((item, index) => {
                            return <li
                                key={item.id}
                                className={active === index ? "on" : ""}
                                onClick={() => {
                                    this.setState({
                                        active:index
                                    })
                                }}
                            >

                            </li>
                        })
                    }
                </ul>
                <ol className='content'>
                    {
                        classify[active] ?
                            classify[active].children.map(item => {
                                return <li key={item.id}>
                                    <p><img src={item.img} alt="" /></p>
                                    <p>{item.title}</p>
                                </li>
                            }) : "暂无数据"
                    }
                </ol>
                {/* <Class classify={classify} active={active}></Class> */}
                <List list={list}></List>

            </div>
        )
    }
}

export default Index